<template>
  <view class="container-tabbar container-bg">
    <view v-show="!loading">
      <view class="user_top">
        <!--顶部个人信息栏-->
        <view class="header-section">
          <view class="flex_b_c p-content">
            <view class="flex_b_c">
              <u-avatar class="avatar" :src="userInfo.avatar" size="60"/>
              <view v-if="!userInfo.realname" @click="handleToLogin" class="login-tip">点击登录</view>
              <view v-if="userInfo.realname" @click="handleToInfo" class="user-info">
                <view class="u_title">{{ userInfo.realname }}</view>
              </view>
            </view>
            <view @click="handleSign" class="flex_s_b">
              <text class="mr-20">考勤打卡</text>
              <u-icon class="icon-right" size="15" name="arrow-right" color="#ffffff !important"/>
            </view>
          </view>
        </view>
      </view>
      <view class="p-content">
        <view class="content-section">
          <!-- 快捷方式 -->
          <view class="mine-actions flex_a_c col-3 ">
            <view class="action-item" @click="handleQuick(index)" v-for="(item,index) of contentSection">
              <view class="m_icon">
                <u-icon class="icon-top" size="28" :name="item.icon"/>
              </view>
              <view>
                <text class="text">{{ item.title }}</text>
              </view>
            </view>
          </view>

          <view class="menu-list">
            <u-cell-group :border="false">
              <u-cell :icon="item.icon" :title="item.title"  v-for="item of cellList" @click="handleSetting(item.index)"
                      clickable isLink size="large" />
            </u-cell-group>
          </view>
        </view>
      </view>
    </view>
    <u-loading-page :loading="loading" loading-color="#ff6a00" icon-size="36" loading-text="加载中" />
  </view>
</template>

<script>
import {InfoUtils, ModalUtils, UniRouter} from "@/util/uniUtils";
import {mapState} from "vuex";
import RouterPath from "@/constant/RouterPath";
import DictApi from "@/api/DictApi";

export default {
  name: "user",
  data() {
    return {
      avatar: '',
      //快捷导航
      contentSection: [
        {
          index: 0,
          icon: 'file-text-fill',
          title: '待办事项'
        },
        {
          index: 1,
          icon: 'calendar-fill',
          title: '我的排班'
        },
        {
          index: 2,
          icon: 'account-fill',
          title: '个人信息'
        },
      ],
      //账号设置
      cellList: [
        {
          index: 0,
          icon: 'setting',
          title: '修改密码',
        },
        {
          index: 1,
          icon: 'star',
          title: '个人信息',
        },
        {
          index: 2,
          icon: 'share-square',
          title: '测试页面',
        },
        {
          index: 4,
          icon: 'trash',
          title: '清除缓存',
        },
        {
          index: 3,
          icon: 'share-square',
          title: '退出登录',
        },

      ],
      loading:true,
    }
  },
  onLoad(){
    console.log("我的load")
    setTimeout(()=>this.loading=false,500)
  },
  methods: {
    //跳转快捷方式
    handleQuick(index) {
      console.log("点击", index)
      switch (index) {
        case 0:
          //待办事项
          break;
        case 1:
          //排班表
          break;
        case 2:
          //个人信息
          UniRouter.navigateTo(RouterPath.user.perfect)
          break;
      }
    },
    //账号设置跳转
    async handleSetting(index) {
      switch (index) {
        case 0:
          //修改密码
          UniRouter.navigateTo(RouterPath.login.changePassword)
          break;
        case 1:
          //个人信息
          UniRouter.navigateTo(RouterPath.user.perfect)
          break
        case 2:
          UniRouter.navigateTo(RouterPath.test.index)
          break
        case 3:
          //退出登录
          try {
            let flag = await ModalUtils.showModalPromise("确定要退出登录吗?")
            if (flag) {
              try {
                await this.$store.dispatch("Logout")
                InfoUtils.showInfo("退出登录成功")
                UniRouter.reLaunch(RouterPath.login.login)
              } catch (e) {
                console.log("退出异常", e)
                UniRouter.reLaunch(RouterPath.login.login)
              }
            }
          } catch (e) {
            console.log("退出登录失败", e)
            UniRouter.reLaunch(RouterPath.login.login)
          } finally {
            //
          }
          //退出登录
          break;
        case 4:
          this.cleanCache()
          break
      }
    },
    //跳转个人信息页面
    handleSign() {
    },
    handleToInfo() {

    },
    //跳转登录页
    handleToLogin() {
      UniRouter.navigateTo(RouterPath.login.login)
    },
    async cleanCache(){
      try {
        await DictApi.getDict()
        InfoUtils.showInfo('缓存清除成功')
      } catch (e) {
        InfoUtils.showInfo('缓存清除失败')
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
    })
  }
}
</script>

<style lang="scss" scoped>
@import "@/static/flex";

.container-bg {
  background-color: $uni-bg-color-grey;
}

.user_top {
  width: 100%;
  background-color: $main-color;
  margin-bottom: 20rpx;
}


.icon-first {
  margin-right: 5px;
}

.icon-right {
  right: 15px;
  position: absolute;
}

.icon-top {
  justify-content: center;
  text-align: center;
  margin: auto;
}

.header-section {
  padding: 15px 15px 45px 15px;
  background-image: linear-gradient(to right, $main-color, $main-color-2);
  color: white;

  .login-tip {
    font-size: 18px;
    margin-left: 10px;
  }

  .cu-avatar {
    border: 2px solid #eaeaea;

    .icon {
      font-size: 40px;
    }
  }

  .user-info {
    margin-left: 15px;

    .u_title {
      font-size: 18px;
      line-height: 30px;
    }
  }
}

.content-section {
  position: relative;
  top: -50px;

  .mine-actions {
    margin: 30rpx 0;
    //margin: 15px 15px;
    padding: 20px 0px;
    border-radius: 8px;
    background-color: white;

    .action-item {
      .icon {
        font-size: 28px;
      }

      .text {
        display: block;
        font-size: 13px;
        margin: 8px 0px;
      }
    }
  }
}

.menu-list {
  margin-top: 30rpx;
  background-color: #fff;
}

.m_icon {
  display: flex;
  justify-content: center;
}

/deep/ .u-icon__icon {
  color: $main-color !important;
}
</style>

